import React from 'react';
import { AppState } from '../types';

type SidebarProps = {
  info: {
    title: string;
    items: Array<{
      id: string;
      text: string;
    }>;
  };
  marketTrends: string;
  quotaWarning?: {
    message: string;
    type: 'warning' | 'error';
  };
  isCollapsed: boolean;
  onToggleCollapse: () => void;
  state: AppState;
  dispatch: React.Dispatch<any>;
};

export const Sidebar: React.FC<SidebarProps> = ({
  info,
  marketTrends,
  quotaWarning,
  isCollapsed,
  onToggleCollapse,
  state,
  dispatch
}) => {
  return (
    <aside className={`sidebar ${isCollapsed ? 'collapsed' : ''}`}>
      <button className="toggle-btn" onClick={onToggleCollapse}>
        {isCollapsed ? '>' : '<'}
      </button>
      
      {!isCollapsed && (
        <>
          <div className="info-section">
            <h3>{info.title}</h3>
            <ul>
              {info.items.map(item => (
                <li key={item.id}>{item.text}</li>
              ))}
            </ul>
          </div>
          
          <div className="market-trends">
            <h3>Market Trends</h3>
            <p>{marketTrends}</p>
          </div>
          
          {quotaWarning && (
            <div className={`quota-warning ${quotaWarning.type}`}>
              {quotaWarning.message}
            </div>
          )}
        </>
      )}
    </aside>
  );
};